body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .slide {
        // transform-style: preserve-3d;
        transition: 1s;
        transform-origin: center center -150px;
        position: relative;
        .container {
            position: relative;
            z-index: 0;
            section{
                z-index: -1;
                display: flex;
                transform-style: preserve-3d;
                transition: 1s;
                div{
                    position: absolute;
                    overflow: hidden;
                    @for $i from 1 to 5 {
                        &:nth-child(#{$i}) {
                            transform: rotateY(-#{$i * 90}deg);
                        }
                    }
                    img {
                        cursor: pointer;
                    }
                }
            }
        }
        .change {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            justify-items:center;
            width:200px;
            position: absolute;
            left:50%;
            transform:translateX(-50%);
            top:20px;
            span {
                z-index: 100;
                background-color: #e67e22;
                color: white;
                font-weight: bold;
                width: 30px;
                height: 30px;
                display: grid;
                justify-content: center;
                align-content: center;
                border-radius: 50%;
                cursor: pointer;
                &.active {
                    background-color: #34495e;
                }
            }
        }
    }
}